<template>
    <div class="lin_obsbotack">
        <div class="lin_obsbotack_list">
          <div>
            <h4>Position: DevOps and Maintenance</h4>
            <h4>Obsbot official website</h4>
            <h4>built using Alibaba Cloud ack cluster</h4>
          </div>
          <div class="lin_obsbotack_ack">
              <div>
                  <a href="https://www.aliyun.com/product/kubernetes#introduction" target="_blank">
                      <img src="/images/icons8-k8s-50.png" >
                      <img src="/images/icons8-k8s-48.png">
                  </a>
              </div>

              <div style="font-size: 11px; display: flex ">
                ACK provides high-performance and scalable container application management capabilities,
                supporting full lifecycle management of enterprise level containerized applications.
              </div>

              <div>
                  <nuxt-link to="/designer/work/kubernetes-of-ack">
                      <el-button
                          size="small"
                          link
                      >
                      Read case study
                      <el-icon class="lin_right_icon"><Right /></el-icon>
                      </el-button>
                  </nuxt-link>
              </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Right } from '@element-plus/icons-vue';

</script>

<style  scoped lang="scss">

.lin_obsbotack {

  width: 700px;
}

.lin_obsbotack_list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lin_obsbotack_ack_button {
  border: none;
  background: none;
  margin: 10px 0;
}

@media screen and (max-width: 1350px) {
  .lin_obsbotack_ack {
    width: 70%;
    padding: 20px 0;
    transition: all 0.3s ease;
  }
  * {
    font-size: 13px;
  }
}

@media screen and (max-width: 1000px) {
  .lin_obsbotack_ack {
    width: 60%;
    padding: 20px 0;
    transition: all 0.3s ease;
  }
  * {
    font-size: 13px;
  }
}



@media screen and (max-width: 824px) {
  .lin_obsbotack_ack {
    width: 50%;
    padding: 20px 0;
    transition: all 0.3s ease;
  }
  * {
    font-size: 13px;
  }
}

@media screen and (max-width: 610px) {
  .lin_obsbotack_ack {
    width: 30%;
    padding: 20px 0;
    transition: all 0.3s ease;
  }
  * {
    font-size: 11px;
  }
}

@media screen and (max-width: 220px) {
  .lin_obsbotack_ack {
    width: 16%;
    padding: 20px 0;
    transition: all 0.3s ease;
  }
  * {
    font-size: 9px;
  }
}

</style>